<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="jQuery.select2Buttons.js"></script>
    <link rel="stylesheet" type="text/css" href="select2Buttons.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>jQuery Select 2 Buttons Plugin</title>

  </head>
  <body>
    <h1>Select 2 Buttons JQuery Plugin</h1>

    <p>
    This is a demo page for the Select2Buttons jQuery plugin.  Which
    provides an alternative way of displaying standard HTML selects.
    <br>
    <a href="https://github.com/o-sam-o/jquery.select2Buttons">The documentation and source is available here.</a>
    </p>

    <form method="GET">
      <p>
        <label for="simple-select">Simple Select:</label>
        <select name="simple-select" class="standard-demo">
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
        </select>
      </p>

      <p>
        <label for="preselected-select">Preselected Select:</label>
        <select name="preselected-select" class="standard-demo">
          <option>One</option>
          <option selected="selected">Selected</option>
          <option>Three</option>
        </select>
      </p>

       <p>
        <label for="disabled-option-select">Disabled Option Select:</label>
        <select name="disabled-option-select" class="standard-demo">
          <option>One</option>
          <option disabled="disabled">Disabled</option>
          <option>Three</option>
        </select>
      </p>

       <p>
        <label for="disabled-select">Disabled Select:</label>
        <select name="disabled-select" disabled="true" class="standard-demo">
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
        </select>
      </p>

      <p>
        <label for="js-callback-select">JS Callback Select:</label>
        <select name="js-callback-select" class="standard-demo">
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
        </select>
      </p>

      <p>
        <label for="no-default-select">No Default Select:</label>
        <select name="no-default-select">
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
        </select>
      </p>

      <p>
        <label for="opt-group-select">Opt Group Select:</label>
        <select name="opt-group-select" class="standard-demo">
          <optgroup label="Numbers">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
          </optgroup>
          <optgroup label="Colours">
            <option>Red</option>
            <option>Blue</option>
            <option>Green</option>
          </optgroup>
        </select>
      </p>

      <p>
        <label for="multi-select">Multiselect:</label>
        <select name="multi-select" multiple="multiple" class="standard-demo">
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
        </select>
      </p>

      <p>
        <input type="submit"/>
      </p>
    </form>

    <script>
      $('.standard-demo').select2Buttons();

      $('select[name=js-callback-select]').change(function() {
        alert('Changed to ' + $(this).val());
      });

      $('select[name=no-default-select]').select2Buttons({noDefault: true});
    </script>

  </body>
</html>
